<template>
  <el-menu-item :index="props.index" @click="openDialog">坐标转换</el-menu-item>
  <el-dialog v-model="dialog" title="坐标转换" width="80%">
    <el-divider content-position="left">角度转弧度</el-divider>
    <el-row>
      <el-col style="display: flex; justify-content: flex-start; align-items: flex" :span="8">
        <el-input v-model.number="onlyDegrees" type="number" placeholder="请输入角度值"></el-input>
      </el-col>
      <el-col style="display: flex; justify-content: center; align-items: center" :span="8">
        <el-button type="primary" @click="degreesToRadians">toRadians角度转换为弧度</el-button>
      </el-col>
      <el-col style="display: flex; justify-content: flex-end; align-items: center" :span="8">
        <el-input v-model="toRadians" readonly placeholder="弧度值"></el-input>
      </el-col>
    </el-row>
    <el-divider content-position="left">弧度转角度</el-divider>
    <el-row>
      <el-col style="display: flex; justify-content: flex-start; align-items: flex" :span="8">
        <el-input v-model.number="onlyRadians" type="number" placeholder="请输入弧度值"></el-input>
      </el-col>
      <el-col style="display: flex; justify-content: center; align-items: center" :span="8">
        <el-button type="primary" @click="radiansToDegrees">toDegrees弧度转换为角度</el-button>
      </el-col>
      <el-col style="display: flex; justify-content: flex-end; align-items: center" :span="8">
        <el-input v-model="toDegrees" readonly placeholder="角度值"></el-input>
      </el-col>
    </el-row>
    <el-divider content-position="left">经纬度转弧度</el-divider>
    <el-row>
      <el-col style="display: flex; justify-content: flex-start; align-items: flex" :span="8">
        <el-input
          v-model.number="cartographiclongitude"
          type="number"
          placeholder="请输入经度"
        ></el-input
        ><el-input
          v-model.number="cartographiclatitude"
          type="number"
          placeholder="请输入纬度"
        ></el-input
        ><el-input
          v-model.number="cartographicheight"
          type="number"
          placeholder="请输入高度"
        ></el-input>
      </el-col>
      <el-col style="display: flex; justify-content: center; align-items: center" :span="8">
        <el-button type="primary" @click="cartographicFromDegrees"
          >Cartographic.fromDegrees经纬度转制图坐标(弧度)</el-button
        >
      </el-col>
      <el-col style="display: flex; justify-content: flex-end; align-items: center" :span="8">
        <el-input v-model="cartographic" readonly placeholder="制图坐标(弧度)"></el-input>
      </el-col>
    </el-row>
    <el-divider content-position="left">经纬弧度转笛卡尔3</el-divider>
    <el-row>
      <el-col style="display: flex; justify-content: flex-start; align-items: flex" :span="8">
        <el-input v-model="cartographic" readonly placeholder="弧度"></el-input>
      </el-col>
      <el-col style="display: flex; justify-content: center; align-items: center" :span="8">
        <el-button type="primary" @click="cartesian3FromRadians"
          >Cartesian3.fromRadians经纬弧度转笛卡尔3</el-button
        >
      </el-col>
      <el-col style="display: flex; justify-content: flex-end; align-items: center" :span="8">
        <el-input v-model="cartesian3Radians" readonly placeholder="笛卡尔3"></el-input>
      </el-col>
    </el-row>
    <el-divider content-position="left">笛卡尔3转弧度</el-divider>
    <el-row>
      <el-col style="display: flex; justify-content: flex-start; align-items: flex" :span="8">
        <el-input v-model="cartesian3Radians" readonly placeholder="笛卡尔3"></el-input>
      </el-col>
      <el-col style="display: flex; justify-content: center; align-items: center" :span="8">
        <el-button type="primary" @click="cartographicFromCartesian"
          >Cartographic.fromCartesian笛卡尔3转弧度</el-button
        >
      </el-col>
      <el-col style="display: flex; justify-content: flex-end; align-items: center" :span="8">
        <el-input v-model="cartographicCartesian3" readonly placeholder="弧度"></el-input>
      </el-col>
    </el-row>

    <el-divider content-position="left">经纬度转笛卡尔3</el-divider>
    <el-row>
      <el-col style="display: flex; justify-content: flex-start; align-items: flex" :span="8">
        <el-input
          v-model.number="cartesian3LongitudeDegrees"
          type="number"
          placeholder="请输入经度"
        ></el-input
        ><el-input
          v-model.number="cartesian3LatitudeDegrees"
          type="number"
          placeholder="请输入纬度"
        ></el-input
        ><el-input
          v-model.number="cartesian3HeightDegrees"
          type="number"
          placeholder="请输入高度"
        ></el-input>
      </el-col>
      <el-col style="display: flex; justify-content: center; align-items: center" :span="8">
        <el-button type="primary" @click="cartesian3FromDegrees"
          >Cartesian3.fromDegrees经纬度转笛卡尔3</el-button
        >
      </el-col>
      <el-col style="display: flex; justify-content: flex-end; align-items: center" :span="8">
        <el-input v-model="cartesian3Degrees" readonly placeholder="笛卡尔3"></el-input>
      </el-col>
    </el-row>

    <el-divider content-position="left">笛卡尔转化为经纬度(笛卡尔-弧度-经纬度)</el-divider>
    <el-row>
      <el-col style="display: flex; justify-content: flex-start; align-items: flex" :span="8">
        <el-input v-model="cartesian3Degrees" readonly placeholder="笛卡尔3"></el-input>
        <el-input v-model="cartographicCartesian" readonly placeholder="弧度"></el-input>
      </el-col>
      <el-col style="display: flex; justify-content: center; align-items: center" :span="8">
        <el-button type="primary" @click="degreesFromCartesian3">笛卡尔转化为经纬度</el-button>
      </el-col>
      <el-col style="display: flex; justify-content: flex-end; align-items: center" :span="8">
        <el-input v-model="degreesCartesian3.longitude" readonly placeholder="经度"></el-input>
        <el-input v-model="degreesCartesian3.latitude" readonly placeholder="纬度"></el-input>
        <el-input v-model="degreesCartesian3.height" readonly placeholder="高度"></el-input>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup>
//
//WGS84经纬度坐标系   180/π × 弧度
//WGS84弧度坐标系 ( cartographic )  π/180 × 角度
//笛卡尔空间直角坐标系 ( cartesia3 )
//笛卡尔平面坐标系 ( cartesia2 )   屏幕坐标系
//笛卡尔4D坐标系 ( cartesia4 )

import * as Cesium from 'cesium'
import { useCesiumStore } from '@/stores/cesiumStore'
import { ref, onMounted, onUnmounted } from 'vue'

// 定义props
const props = defineProps({
  index: {
    type: String,
    required: true,
  },
})

// 使用 Cesium Store
const cesiumStore = useCesiumStore()
const dialog = ref(false)
const openDialog = () => {
  dialog.value = true

  // 鼠标事件，获取当前坐标的信息，打印在控制台
  // viewer 是Cesium的主要对象，代表整个3D视图   scene 是3D场景，包含所有可视元素  globe 是地球对象
  // 深度检测开启，默认是关闭的
  cesiumStore.viewerCesium.scene.globe.depthTestAgainstTerrain = true
  // ScreenSpaceEventHandler 是Cesium中处理用户输入(如鼠标点击、移动等)的类
  //viewer.scene.canvas 是Cesium渲染的HTML画布元素  这行代码创建了一个事件处理器，用于监听在Cesium画布上发生的事件
  // 查看鼠标点击位置的坐标信息
  const handler = new Cesium.ScreenSpaceEventHandler(cesiumStore.viewerCesium.scene.canvas)

  // 绑定屏幕空间事件   //setInputAction 方法用于设置特定事件的回调函数
  handler.setInputAction((click) => {
    //click 参数包含点击事件的信息
    // click.position 是鼠标点击的屏幕坐标(x,y像素位置)
    // getPickRay 方法根据屏幕坐标创建一条从相机位置射向该屏幕点的射线
    // 这条射线用于确定用户实际点击的是3D空间中的哪个位置
    const ray = cesiumStore.viewerCesium.camera.getPickRay(click.position)
    //     globe.pick 方法计算射线与地球表面的交点
    // 返回的 position 是一个Cartesian3对象，表示3D空间中的点(x,y,z坐标)
    // 如果射线没有与地球相交(例如点击了天空)，则返回undefined
    // 返回ray和地球表面的一个交点的Cartesian3坐标
    const position = cesiumStore.viewerCesium.scene.globe.pick(ray, cesiumStore.viewerCesium.scene)

    // 如果position不为空
    if (position) {
      console.log('点击地方的笛卡尔3坐标：', position)
      // 转弧度
      // Ellipsoid.WGS84 代表WGS84椭球体(地球的数学模型)
      // cartesianToCartographic 将笛卡尔坐标转换为地理坐标(经度、纬度、高度)
      // 返回的 cartographic 包含经度和纬度(以弧度为单位)以及高度(以米为单位)
      // WGS84是全球定位系统GPS使用的坐标系统
      const cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position)
      console.log('点击地方的W84弧度坐标：', cartographic)

      // 转经纬度
      const longitude = Cesium.Math.toDegrees(cartographic.longitude)
      const latitude = Cesium.Math.toDegrees(cartographic.latitude)
      const { height } = cartographic

      console.log('点击地方的W84经纬度坐标：', `${longitude}, ${latitude}, ${height}`)
    } else {
      console.log('点击的地方没有与地球相交')
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK) //监听的是鼠标左键点击事件
}
const onlyDegrees = ref(undefined)
const toRadians = ref(undefined)
//角度转换为弧度
const degreesToRadians = () => {
  if (!onlyDegrees.value) return
  toRadians.value = Cesium.Math.toRadians(onlyDegrees.value)
}

const onlyRadians = ref(undefined)
const toDegrees = ref(undefined)
//弧度转换为角度
const radiansToDegrees = () => {
  if (!onlyRadians.value) return
  toDegrees.value = Cesium.Math.toDegrees(onlyRadians.value)
}
const cartographiclongitude = ref(undefined)
const cartographiclatitude = ref(undefined)
const cartographicheight = ref(undefined)
const cartographic = ref(undefined)
// //经纬度转弧度制图坐标  输入度,输出弧度  根据以度为单位指定的经度和纬度创建新的制图实例。结果对象中的值将以弧度为单位。
const cartographicFromDegrees = () => {
  //Cesium.Cartographic（经度、纬度、高度） 以弧度为单位
  //Cesium.Cartographic.fromDegrees   以度数为单位   结果为弧度
  cartographic.value = Cesium.Cartographic.fromDegrees(
    cartographiclongitude.value,
    cartographiclatitude.value,
    cartographicheight.value,
  )
  console.log('经纬度转弧度制图坐标弧度结果 Cartographic 对象', cartographic.value)
}

const cartesian3Radians = ref(undefined)
//  3.弧度转笛卡尔3
const cartesian3FromRadians = () => {
  if (!cartographic.value) return
  // 从cartographic对象中提取经度、纬度和高度
  const longitude = cartographic.value.longitude
  const latitude = cartographic.value.latitude
  const height = cartographic.value.height || 0
  console.log('从cartographic对象中提取经度、纬度和高度', longitude, latitude, height)
  cartesian3Radians.value = Cesium.Cartesian3.fromRadians(longitude, latitude, height)
  console.log('弧度转笛卡尔3 结果 Cartesian3 对象', cartesian3Radians.value)
}
const cartographicCartesian3 = ref(undefined)
// 4.笛卡尔3转弧度
const cartographicFromCartesian = () => {
  if (!cartesian3Radians.value) return
  // 确保cartesian3Radians.value是一个有效的Cartesian3对象
  if (
    cartesian3Radians.value.x !== undefined &&
    cartesian3Radians.value.y !== undefined &&
    cartesian3Radians.value.z !== undefined
  ) {
    cartographicCartesian3.value = Cesium.Cartographic.fromCartesian(cartesian3Radians.value)
    console.log('笛卡尔3转弧度结果 Cartographic', cartographicCartesian3.value)
  }
}

const cartesian3LongitudeDegrees = ref(undefined)
const cartesian3LatitudeDegrees = ref(undefined)
const cartesian3HeightDegrees = ref(undefined)
const cartesian3Degrees = ref(undefined)
// 5.经纬度转笛卡尔3
const cartesian3FromDegrees = () => {
  cartesian3Degrees.value = Cesium.Cartesian3.fromDegrees(
    cartesian3LongitudeDegrees.value,
    cartesian3LatitudeDegrees.value,
    cartesian3HeightDegrees.value,
  )
  console.log('经纬度转笛卡尔3 结果 Cartesian3 对象', cartesian3Degrees.value)
}
const degreesCartesian3 = ref({
  longitude: undefined,
  latitude: undefined,
  height: undefined,
})
const cartographicCartesian = ref(undefined)
const degreesFromCartesian3 = () => {
  if (!cartesian3Degrees.value) return
  cartographicCartesian.value = Cesium.Cartographic.fromCartesian(cartesian3Degrees.value)
  console.log('笛卡尔3转经纬度结果 Cartographic', cartographicCartesian.value)

  // 创建一个新对象并整体替换
  degreesCartesian3.value = {
    longitude: Cesium.Math.toDegrees(cartographicCartesian.value.longitude),
    latitude: Cesium.Math.toDegrees(cartographicCartesian.value.latitude),
    height: cartographicCartesian.value.height,
  }
  console.log('笛卡尔3转经纬度结果', degreesCartesian3)
}
</script>

<style lang="scss" scoped></style>
